<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type='text/javascript' src='../jquery-1.10.2.js'></script>
<!--<script type='text/javascript' src='jquery-tmpl.js'></script>-->
<script type='text/javascript' src='../knockout-2.3.0.js'></script>
</head>
<body>
<form data-bind="submit: addItem">
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
<script>

var viewModel = function () {
    this.itemToAdd = ko.observable(''); 
	this.items = ko.observableArray(['Alpha','Beta','Gamma']);

    this.addItem = function () {
        this.items.push(this.itemToAdd());
		this.itemToAdd('');
    } 

};

ko.applyBindings(new viewModel());
</script>

</body>
</html>